<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .box{
            box-sizing: border-box;
            width: 400px;
            height: 400px;
            border: 2px solid rgb(11, 11, 11);
            margin: 20px;
            position: relative;
        }
        .small {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 1px solid antiquewhite;
            background-color: antiquewhite;
            position: absolute;
        }
    </style>
<body>
    <div class="box" id = 'bigbox'>
        <div class="small" id='smallbox'>
        </div>
    </div>
    <script>
        var bigbox =document.querySelector('#bigbox')
        var smallbox =document.querySelector('#smallbox')
        console.log(smallbox)
        smallbox.onmousedown = function(event){
            smallbox.style.background = 'deeppink';

            bigbox.onmousemove = function(event){
                var eleLeft = event.clientX-bigbox.getBoundingClientRect().left;
                    console.log(eleLeft)
                var eleyTop = event.clientY-bigbox.getBoundingClientRect().top ; 
                
                var left = eleLeft-smallbox.offsetWidth/2
                var top  = eleyTop-smallbox.offsetHeight/2
                if(left<0){
                    left=0
                }else if(left>bigbox.clientWidth-smallbox.offsetWidth){
                    left = bigbox.clientWidth-smallbox.offsetWidth
                }
                if(top<0){
                    top = 0
                }else if (top>bigbox.clientHeight-smallbox.offsetHeight){
                    top =   bigbox.clientHeight-smallbox.offsetHeight
                }
                smallbox.style.left = left + 'px'
                smallbox.style.top =  top + 'px'
            }
        }
        document.onmouseup = function(){
            smallbox.style.background ='antiquewhite'
            bigbox.onmousemove = null 
        }
    </script>
</body>
</html>